<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='js/vue.js'></script>
</head>
<body>
    <div id='app'>
       姓: <input type="text" placeholder="firstname" v-model="firstname"> <br>
       名: <input type="text" placeholder="lastname" v-model="lastname"> <br>
       get方法获取的fullname1:<input type="text" v-model="fullname1" placeholder="fullname1"> <br>
       set方法获取的fullname2: <input type="text" v-model="fullname2" placeholder="fullname2"> <br>
    </div>
    <script type='text/javascript'>
        var vm = new Vue({
            el: '#app',
            data: {
                firstname:'',
                lastname:''
            },
            computed:{
                //以下是使用computed默认的get方法调用去获取并返回fullname 但是该方法不支持定时器
                fullname1(){
                    //如果修改这个的结果会进行报错
                    // setInterval(()=>{
                        return this.firstname+' '+this.lastname;
                    // },1000)
                },
                //接下来fullname2使用set方法去获取
                fullname2:{
                    get(){
                        return this.firstname +' '+ this.lastname;
                    },
                    //以上通过get方法获取到了值接下来通过set方法去设置
                    set(val){
                        //只有手工修改后才会触发
                        // console.log(val);
                        // 接下来是对val进行操作
                        // 对数据进行分割后接下来就是可以对之前的数据进行赋值然后实现数据的双向绑定
                       var nameArr=val.split(' ')
                       this.firstname=nameArr[0];
                       this.lastname=nameArr[1];
                       
                   
                        
                    }
                }

            }
        });
    </script>
</body>
</html>
